<!doctype html>
<head>
	<title>vue组件demo</title>
	<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
	<script src="../js/vue.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		input {
			width: 265px;
			height: 28px;
			border-radius: 5px;
			border: 1px solid #ccc;
			/* 输入框的背景颜色为透明 */
			background-color: transparent;
		}

		/* 输入框获取焦点时 */
		input:focus {
			/* 边框颜色为 #66AFE，!important 用于提高优先级 */
			border-color: #66AFE !important;
			/* 去除输入框获取焦点时的默认轮廓 */
			outline: 0;
			/* Webkit 浏览器的内阴影样式 */
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			/* Firefox 浏览器的内阴影样式 */
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			/* 通用的盒阴影样式 */
		}

		/*向下箭头样式*/
		.triangle_border_down {
			border: #ccc solid 1px;
			border-radius: 5px;
			width: 30px;
			height: 30px;
			/* 以行内块级元素显示 */
			display: inline-block;
			vertical-align: top;
			position: relative;
			cursor: pointer;

		}

		.triangle_border_down:hover {
			background-color: #ccc;
		}

		/* 为具有这两个类名的元素设置特定的样式 */
		.triangle_border_down.down {
			width: 0;
			height: 0;
			border-width: 10px 10px 0;
			border-style: solid;
			/*灰 透明 透明 */
			border-color: #333 transparent transparent;
			position: absolute;
			top: 12px;
			left: 5px;
		}

		.triangle_border_down.up {
			width: 0;
			height: 0;
			border-width: 0px 10px 10px;
			border-style: solid;
			/*灰 透明 透明 */
			border-color: transparent transparent #333;
			position: absolute;
			top: 8px;
			left: 5px;
		}

		.panel {
			width: 245px;
			border-radius: 5px;
			border: 1px solid #ccc;
			padding: 10px;
		}

		li {
			list-style-type: none;
			cursor: pointer;
		}

		li:hover {
			background-color: #ccc;
		}

		#main {
			position: relative;
			width: 100%;
			height: 500px;
		}

		.center {
			position: absolute;
			top: 30%;
			left: 35%;
		}
	</style>
	<!-- 上述部分为页面的样式定义 -->
</head>
<body>
	<div id="main">
		<!-- 挂载父组件，并传递 "city" 数据 -->
		<father-component class="center" v-bind:list="city">
			<p>使用插槽</p>
		</father-component>
	</div>
	<template id="temp">
		<div class="fatherCom">
			<!-- 插槽，用于父组件接收子组件传递的内容 -->
			<slot>没有内容哦</slot>
			<div>
				<input type="text" v-model="value" />
				<!-- 点击触发显示或隐藏面板的按钮 -->
				<div class="triangle_border_down" v-on:click="showPanel">
					<span class="up" v-show="spanUpShow"></span>
					<span class="down" v-show="spanDownShow"></span>
				</div>
			</div>
			<!-- 条件显示子组件，并传递数据和监听事件 -->
			<child-component v-bind:list="list" v-on:temp-fun="fatherFun" v-show="isShow"></child-component>
		</div>
	</template>
	<script type="text/javascript">
		var Father = {
			props: ['list'],
			// 父组件的数据定义
			data: function() {
				return {
					value: "",
					isShow: false,
					spanDownShow: true,
					spanUpShow: false
				}
			},
			template: '#temp',
			// 注册子组件
			components: {
				'child-component': {
					props: ['list'],
					// 子组件的模板
					template: '<div class="panel"><ul><li v-for="item in list" v-on:click="childFun(item)" v-bind:value="list.item">{{item}}</li></ul></div>',
					methods: {
						childFun: function(value) {
							// 子组件向父组件发射 "tempFun" 事件，并传递值
							this.$emit('temp-fun', value);
						}
					}
				}
			},
			methods: {
				fatherFun: function(item) {
					// 处理子组件传递的 "tempFun" 事件，更新父组件的 "value"
					this.value = item;
				},
				showPanel: function() {
					// 切换显示状态和箭头显示
					this.isShow = !this.isShow;
					this.spanDownShow = !this.spanDownShow;
					this.spanUpShow = !this.spanUpShow;
				}
			},
			watch: {
				value: function(newValue, oldValue) {
					// 监视 "value" 的变化
					if (newValue === "") {
						this.isShow = false;
						this.spanDownShow = true;
						this.spanUpShow = false;
					} else {
						this.isShow = true;
						this.spanDownShow = false;
						this.spanUpShow = true;
					}
				}
			}
		}
		var vm = new Vue({
			el: '#main',
			// 注册父组件
			components: {
				'father-component': Father
			},
			data: {
				city: ['HTML5', 'node.js', 'JavaScript', 'Vue']
			}
		})
	</script>
</body>
</html>